<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Little - Dinosaur</title>

  <link href="http://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/5.10.0-12/css/all.css" rel="stylesheet">

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-dark fixed-top flex-md-nowrap header">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">
  <img src="{{ url_for('static', filename='img/logo.jpg') }}" width="35" height="35"
    class="d-inline-block align-top rounded-circle">
  <span class="ml-1">Little Dinosaur</span> 
  </a>
</nav>
<!-- header nav end -->

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 px-0 d-none d-md-block sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link {{ active_link[0] }}" href="/">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-home">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
              Home
            </a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link {{ active_link[1] }}" href="/">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-bar-chart-2">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
              </svg>
              Reports
            </a>
          </li> -->
          <li class="nav-item">
            <a class="nav-link {{ active_link[2] }}" href="/predict_page">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-file">
                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                <polyline points="13 2 13 9 20 9"></polyline>
              </svg>
              Predict
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link {{ active_link[3] }}" href="/recommend_page">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" 
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                stroke-linejoin="round" class="feather feather-layers">
                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                <polyline points="2 17 12 22 22 17"></polyline>
                <polyline points="2 12 12 17 22 12"></polyline>
              </svg>
              Recommend
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- sidebar nav end -->

    <main role="main" class="col-10 px-5 ml-auto pb-5" style="padding-top:60px;background-color:#f0f4f5;">
      {% block content %}
      {% endblock %}
    </main>
    <!-- main end  -->
  </div>
  <!-- row end  -->
</div>
<!-- container-fluid -->

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}
</body>
</html>